<template>
    <view class="offer">
        <view class="record_navigation">
            <view class="record_navigation_son">
                <view @tap="urlTo('/pages/personalCenter/record')">成交记录</view>
                <view @tap="urlTo('/pages/personalCenter/price')">卖家售价</view>
                <view class="record_org">买家出价</view>
            </view>
        </view>
        <view class="record_table">
            <view class="offer_tab">
                <view>尺码</view>
                <view>买家出价</view>
            </view>
            <view class="offer_for">
                <!--暂无数据显示-->
                <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
                <view class="offer_th" wx:if="{{!is_empty}}" wx:for="{{List}}" wx:key="item">
                    <view>{{item.size}}</view>
                    <view>{{item.amount}}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {GOODSDETAIL} from '@/utils/constant'
    import Placeholder from '../../components/common/placeholder'
    export default class offer extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '买家出价' // 头部标题
      }

      components = {
        placeholder: Placeholder
      }

      data = {
        List: [],
        form: {
          page: 1,
          limit: 10
        },
        page_total: '',
        is_empty: false
      }

      methods = {
        // 方法
        urlTo(url) {
          wx.redirectTo({
            url: url
          })
        }
      }
      onLoad() {
        const t = this
        let detail = wx.getStorageSync(GOODSDETAIL)
        if (detail) {
          t.form['params[goodsId]'] = detail.id
        }
        t.form['params[size]'] = detail.size
        t.getChildCate()
      }
      events = {}
      async getChildCate(type) {
        const t = this
        const a = await api.goodsSearchBuyerOffer({
          query: t.form
        })
        if (a.data.code == 0) {
          t.page_total = Math.ceil(a.data.data.total / t.form['limit'])
          t.form['page'] = a.data.data.page
          if (type) {
            t.List = [...t.List, ...a.data.data.rows]
          } else {
            t.List = a.data.data.rows
          }
          if (!t.List || t.List[0] == null || t.List.length == 0) {
            t.is_empty = true
          } else {
            t.is_empty = false
          }
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }
      //加载更多
      onReachBottom() {
        let that = this
        that.showLoading = true
        if (that.page_total > that.form['page']) {
          that.form['page']++
          that.getChildCate(1)
        } else {
          that.showLoading = false
        }
      }
    }
</script>
<style lang="less">
.offer {
    .record_navigation {
        background: #fff;
        padding: 40rpx 0;
        .record_navigation_son {
            width: 600rpx;
            margin: 0 auto;
            border: 1px solid orange;
            view {
                display: table-cell;
                color: orange;
                text-align: center;
                width: 200rpx;
                height: 60rpx;
                line-height: 60rpx;
            }
            .record_org {
                background: orange;
                color: #fff;
            }
        }
    }
    .record_table {
        background: #fff;
        .offer_tab {
            display: flex;
            view {
                border-bottom: 1px solid #ddd;
                border-top: 1px solid #ddd;
                width: 50%;
                padding-left: 20rpx;
                height: 80rpx;
                line-height: 80rpx;
            }
            view:first-child {
                color: #666;
            }
            view:last-child {
                color: #333;
                background: #eee;
            }
        }
        .offer_for {
            .offer_th {
                display: flex;
                view {
                    border-bottom: 1px solid #ddd;
                    width: 50%;
                    padding-left: 20rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                }
                view:first-child {
                    color: #666;
                }
                view:last-child {
                    color: #333;
                    background: #eee;
                }
            }
        }
    }
    .empty-placeholder {
        height: 100vh;
    }
}
</style>
